 <style>
 
 
 

   .weather_form_h{
		border: 1px solid rgba(255,255,255,0.5);
		border-radius: 3px;
		width: auto;
		width: 250px;
		background-color: rgba(0, 0, 0, 0.3);
		box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.42),-2px -2px 4px rgba(255, 255, 255, 0.42);
		cursor:pointer;
	 
		top: 4px;
	
	    float:left;
 }

   .weather_form_h span{
 	  text-align:center;
 }
    .weather_form_h .info_item{
      display: flex;
  }
    .weather_form_h  .info_item.now{
  
   font-size: 16px;
    
    border-radius: 4px;
	color:navajowhite
  }
    .weather_form_h .info_item.now .info_img  {
     width: 50px;
	 height: 50px;
 
 }
    .weather_form_h .info_item.now  .info_time{
	
	 padding:12px 2px;
	}
   .weather_form_h  .info_item:hover{
     background-color: rgba(255,255,255,0.1);
  }
     .weather_form_h .info_item div{
       padding:2px ;
  }
     .weather_form_h  .info_item .info_img{
	    width: 30px;
		height: 30px;
		background-color: rgba(2, 82, 84, 0);
		border-radius: 2px;
		margin:10px auto;

	/* 	background-image:url(./img/03.png);
		background-size:100%; */
  }
     .weather_form_h .info_item .info_1{
    width:36px;

  }
     .weather_form_h .info_item .info_2{
      width:68px;

  }
     .weather_form_h .info_item .info_text{
       display: flex;
  }
    .weather_form_h  .spline {
        width: 96%;
		margin: 0 auto;
		height: 1px;
		background: rgba(0,0,0,0.2);
		border-top: 1px solid rgba(255,255,255,0.2);
  }
   
  /*竖排*/ 
.weather_form_v{
      border: 1px solid rgba(255,255,255,0.5);
    border-radius: 3px;
    height: 200px;
    background-color: rgba(26,98,98,0.8);
    box-shadow: 1px 1px 1px rgba(86, 85, 85, 0.8),4px 4px 4px rgba(255, 255, 255, 0.8),-1px -1px 1px rgba(86, 85, 85, 0.8),-4px -4px 4px rgba(255, 255, 255, 0.8);
    cursor: pointer;
    display: flex;
    float: right;
 
	
	  
 }

 .weather_form_v   span,.weather_form_v   div{
 	  text-align:center;
 }
 .weather_form_v  .weather_form .info_item{
    width:80px;
  }
 .weather_form_v  .info_item.now{
  
    font-size: 16px;
 
    border-radius: 4px;
	color:navajowhite;
	width:120px;
  }
 .weather_form_v .info_item.now	 .info_img  {
     width: 76px;
	 height: 70px;
 
 }
 .weather_form_v .info_item:hover{
     background-color: rgba(255,255,255,0.1);
  }
 .weather_form_v  .info_item div{
       padding:2px ;
  }
 .weather_form_v   .info_item .info_img{
	    width: 30px;
		height: 30px;
		background-color: rgba(2, 82, 84, 0);
		border-radius: 2px;
		margin:5px auto;
		

	/* 	background-image:url(./img/03.png);
		background-size: 100%; */
  }
  .weather_form_v .info_item .info_1{
 

  }
  .weather_form_v .info_item .info_2{
     

  }
 .weather_form_v  .info_item .info_text{
       
  }
  .weather_form_v .spline {
        width: 1px;
		margin-top: 2%;
		height: 92%;
		background: rgba(0,0,0,0.2);
		border-left: 1px solid rgba(255,255,255,0.5);
  }

  .line_h{
    width: 30px;
    height: 1px;
    background-color: rgba(123, 123, 123, 0.7);
    border-bottom: 2px solid rgba(236, 236, 236, 0.7);
    margin-top: 185px;
    box-shadow: 0px 0px 2px 2px rgba(228, 228, 228, 0.42);
    float: right;
  
  }
  .weather_form{
  
    position:absolute;
    top:0;
    padding: 3px;
    display:none;
    z-index:1;
  }
  .weather_form_v  .city_name{
     position: absolute; top: 26px; left: 38px; 
  }
   
</style>
<script>
$(function(){ 
 
	$("body").on("mouseenter"," .eqp_weather",function(){
		
	       var _this=$(this);
		   var tar=$("#wform_v"),tar1=$("#wform_v");
		   var prname=_this.attr("prname");
	       if(prname=='undefined' ) return;
	       var wdata=provinceWeather[prname];
		 //  console.log(_this.attr("json"))
		   try{
		      updateWeatherForm(wdata);
		      tar.css({top:_this.offset().top-tar.height()+25,left:_this.offset().left+_this.width()-5 })
			  tar.show();  
		   } 
		    catch(ee){
			    console.log(wdata)
		   }
	     
	      //  console.log(_this.offset().top+"--"+ _this.offset().left+"=="+tar.height());
	
	});
	
	
	
	$("body") .on("mouseleave",".eqp_weather,.weather_form",function(){
	     $(".weather_form").hide();
	});
	
	
	
	 $("#wform_v").on("mousemove",function(){
	     
	    $("#wform_v").show();
	});
 
 
})
 function updateWeatherForm( wdata){
	if(wdata==null )return;
    if(wdata.result==null)  return;
    var data=  wdata.result.data;

   // $("#d_curr .info_img").css("background-image",real.img); 

    var weathers=data.weather;


	for(var i=0;i<4;i++){
		
           
		
         $("#d_to"+i+" .w_date").html(weathers[i].date.slice(5)); 

		 $("#d_to"+i+" .w_week").html("周"+weathers[i].week); 
		
		 $("#d_to"+i+" .w_stat").html(weathers[i].info.day[1]); 

		 $("#d_to"+i+" .w_temp").html(weathers[i].info.night[2]+"℃~"+weathers[1].info.day[2]+"℃"); 
  
		 $("#d_to"+i+" .w_wind").html(weathers[i].info.day[4]); 
		 
		 $("#d_to"+i+" .info_img").attr("class","info_img weath_icon png30 d"+weathers[i].info.day[0])
	}


        var real=data.realtime ;


		$("#d_to0 .w_stat").html(real.weather.info); 

	    //$("#d_to0 .w_temp").html(real.weather.temperature); 
	    
	    //alert(real.weather.humidity)

		$("#d_to0 .w_humidity").html(real.weather.humidity); 


		$("#d_to0 .w_wind").html(real.wind.direct+"("+real.wind.power+")"); 
		
	//	alert(real.weather.img)
		
		
	    $("#d_to0 .info_img").attr("class","info_img weath_icon png80 d"+real.weather.img)
	    
	    $("#d_to0 .city_name").html(real.city_name);

		// 天亮时间----天黑时间
	  }


</script>


<div class="weather_form" id="wform_v">


	 <div class="weather_form_v   colorable"   >
				   <div class="info_item now"  id="d_to0"> 
				   <span class="city_name">重庆</span>

					<div class="info_time">
						<span class="info_text w_date"   >  11-12 </span> 
						<span class="info_text w_week"   >  周四 </span> 
					</div>

	<div class="info_img  weath_icon" ></div> 
	

				   <div class="info_content"> 
						<div class="info_text">  <span class="info_1 w_stat"   >晴 </span> <span class="info_2 w_temp"   >-3C~34C</span> </div> 			
						<div class="info_text">  <div class="info_1 w_wind"   >微风</div>   </div> 
						<div class="info_text">  <span class="info_1 "   >湿度 </span> <span class="info_2 w_humidity">64</span> </div> 
					</div>
				  </div>


   <div class="spline"></div>
                        <div class="info_item "  id="d_to1">   
					    

					<div class="info_time">
						<div class="info_text w_date">  11-12 </div> 
						<div class="info_text w_week">  周四 </div> 
					</div>


                    <div class="info_img  weath_icon" ></div> 

				   <div class="info_content"> 
						<div class="info_text">  <div class="info_1  w_stat" >晴 </div> <div class="info_2 w_temp">-3C~34C</div> </div> 			
						<div class="info_text">  <div class="info_1  w_wind" >微风</div>   </div>  
					</div>
				  </div>
 
      <div class="spline"></div>
                        <div class="info_item "  id="d_to2"> 
					    

					<div class="info_time">
						<div class="info_text w_date">  11-12 </div> 
						<div class="info_text w_week">  周四 </div> 
					</div>


                    <div class="info_img weath_icon"  ></div> 

				   <div class="info_content"> 
						<div class="info_text">  <div class="info_1 w_stat" >晴 </div> <div class="info_2 w_temp">-3C~34C</div> </div> 			
						<div class="info_text ">  <div class="info_1  w_wind" >微风</div>   </div>  
					</div>
				  </div>
				  

				     <div class="spline"></div>
                        <div class="info_item "  id="d_to3"> 
					    

					<div class="info_time">
						<div class="info_text w_date">  11-12 </div> 
						<div class="info_text w_week">  周四 </div> 
					</div>


                    <div class="info_img  weath_icon" ></div> 

				   <div class="info_content"> 
						<div class="info_text">  <div class="info_1 w_stat" >晴 </div> <div class="info_2 w_temp">-3C~34C</div> </div> 			
						<div class="info_text">  <div class="info_1 w_wind" >微风</div>   </div>  
					</div>
				  </div>
 
	  </div>
	  
                <div class="line_h   colorable"></div>
                
                
	  </div>